<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="order.queryInfo.query">
            <el-button slot="append" icon="el-icon-search" @click="handleCurrentChange(1)"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table stripe border :data="order.orderMsg" style="width: 100%">
        <el-table-column prop="orderId" label="订单号"></el-table-column>

        <el-table-column
            prop="orderFoods"
            label="菜品列表">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div v-for="food in scope.row.orderFoods">
                <span>
                  {{ food.title }}  :
                  {{ food.count }}份   单价:  {{ food.price }}元</span>
              </div>
              <div slot="reference" class="name-wrapper">

                <span>{{ scope.row.orderFoods[0].title }}</span>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column prop="address" label="地址"></el-table-column>

        <el-table-column prop="sta" label="订单状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sta===0" type="success">已完成</el-tag>
            <el-tag v-else-if="scope.row.sta===1" type="warning">已付款</el-tag>
            <el-tag v-else-if="scope.row.sta===2" type="dark">已接单</el-tag>
            <el-tag v-else-if="scope.row.sta===3" type="dark">配送中</el-tag>
            <el-tag v-else-if="scope.row.sta===4" type="info">已送达</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.sta===0" @click="showComment(scope.row.id)">查看评价</el-button>
            <el-button v-else-if="scope.row.sta===1" @click="receive(scope.row.id)" type="primary">接单
            </el-button>
            <el-button v-else-if="scope.row.sta===2" @click="send(scope.row.id)">配送</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!--:current-page 当前页码-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="order.queryInfo.pagenum"
          :page-sizes="[ 4, 6, 8]"
          :page-size="order.queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="order.total">
      </el-pagination>

    </el-card>
  </div>
</template>

<script>
export default {
  name: "OrderList",
  props: {
    order: {}
  },
  data() {
    return {}
  },
  methods: {
    handleSizeChange(newSize) {
      this.order.queryInfo.pagesize = newSize
      this.$emit("handleSizeChange", this.order.queryInfo)
    },
    //监听 页码值 改变事件
    handleCurrentChange(newPage) {
      this.order.queryInfo.pagenum = newPage
      this.$emit("handleCurrentChange", this.order.queryInfo)
    },
    //  接单
    receive(id) {
      this.$emit("receive", id)
    },
    //  配送
    send(id) {
      this.$emit("send", id)
    },
    showComment(id) {
      this.$emit("showComment", id)
    }

  }


}
</script>

<style scoped>

</style>
